<template>
  <div class="summary-container">
    <el-card class="box-card" shadow="never">
      <div class="info">
        <div class="left">
          <el-avatar :size="45" shape="square" :src="data.photo">
            <el-icon size="25">
              <UserFilled />
            </el-icon>
          </el-avatar>
        </div>
        <div class="right">
          <div class="base">
            <span> 姓名：{{ data.name }} </span>
            <span> 性别：{{ data.sex }} </span>
            <span> 电话号码：{{ data.tel }} </span>
            <div class="operate" @click="updateHandle">
              <el-icon size="18">
                <Edit />
              </el-icon>
              <div>修改资料</div>
            </div>
          </div>
          <p>注册时间：{{ data.createTime }}</p>
        </div>
      </div>
      <el-divider />
      <el-row :gutter="16">
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="data.amount" suffix="元">
              <template #title>
                <div class="title">累计消费金额</div>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="statistic-card">
            <el-statistic :value="data.count" suffix="笔">
              <template #title>
                <div class="title">有效订单数量</div>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="statistic-card">
            <el-statistic :value="data.number" suffix="个">
              <template #title>
                <div class="title">体检套餐数量</div>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <el-dialog
    title="修改资料"
    :close-on-click-modal="false"
    v-model="dialog.visible"
    width="420px"
  >
    <el-form
      :model="dialog.dataForm"
      :rules="dialog.dataRule"
      ref="dialogForm"
      label-width="60px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="dialog.dataForm.name"
          placeholder="请输入姓名"
          maxlength="10"
          size="medium"
          clearable
          class="input"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select
          v-model="dialog.dataForm.sex"
          placeholder="选择性别"
          maxlength="10"
          size="medium"
          clearable
          class="input"
        >
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input
          v-model="dialog.dataForm.tel"
          placeholder="请输入电话号码"
          maxlength="11"
          size="medium"
          clearable
          class="input"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="medium" @click="dialog.visible = false"
          >取消</el-button
        >
        <el-button size="medium" type="primary" @click="dataFormSubmit"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { da } from "element-plus/es/locale";
import { reactive, ref, Ref, getCurrentInstance } from "vue";
import router from "../../router/index";
const { proxy } = getCurrentInstance();

const data = reactive({
  name: null,
  sex: null,
  tel: null,
  photo: null,
  createTime: null,
  amount: 0,
  count: 0,
  number: 0,
});

const dialog = reactive({
  visible: false,
  dataForm: {
    name: null,
    sex: null,
    tel: null,
  },
  dataRule: {
    name: [
      {
        pattern: "^[\u4e00-\u9fa5]{2,10}$",
        message: "姓名格式错误",
      },
    ],
    tel: [
      {
        required: true,
        message: "电话号码不能为空",
      },
      {
        pattern: "^1[1-9]\\d{9}$",
        message: "电话号码格式错误",
      },
    ],
  },
});

function updateHandle() {
  dialog.visible = true;
  proxy.$nextTick(() => {
    proxy.$refs["dialogForm"].resetFields();
    dialog.dataForm.name = data.name == "未填写" ? null : data.name;
    dialog.dataForm.sex = data.sex == "未填写" ? null : data.sex;
    dialog.dataForm.tel = data.tel;
  });
}

function loadData() {
  proxy.$http(
    "/front/customer/searchSummary",
    "GET",
    null,
    true,
    resp => {
      let result = resp.result;
      data.name = result.name == null ? '未填写' : result.name;
      data.sex = result.sex == null ? '未填写' : result.sex;
      data.tel = result.tel;
      data.photo = result.photo;
      data.createTime = result.createTime;
      data.amount = result.amount;
      data.count = result.count;
      data.number = result.number;
    });
};

loadData();
function dataFormSubmit() {
  proxy.$refs["dialogForm"].validate((valid) => {
    if (valid) {
      proxy.$http(
        "/front/customer/update",
        "POST",
        dialog.dataForm,
        true,
        (resp) => {
          if (resp.result) {
            proxy.$message({
              message: "修改成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                dialog.visible = false;
                loadData();
              },
            });
          } else {
            proxy.$message({
              message: "修改失败",
              type: "error",
              duration: 1500}
            )
          }
        }
      );
    }
  });
}
</script>

<style scoped lang="less">
@import url("mine.less");
</style>